<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理模块</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="layui/css/layui.css" rel="stylesheet">
	</head>
	<body>
	
		<div style="padding: 16px;">
			<table class="layui-hide" id="test" lasy-filter="test"></table>
		</div>
		<!-- 添加表单开始 -->
		<div style="display: none;" id="save">
			<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
				<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">选择身份</label>
							<div class="layui-input-block">
								<select name="role" lay-filter="aihao">
									<option value=""></option>
									<option value="admin" selected>管理员</option>
									<option value="user">用户</option>
									<option value="visitor">游客</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">密码</label>
							<div class="layui-input-block">
								<input type="text" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">手机号</label>
							<div class="layui-input-block">
								<input type="text" name="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
							
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
		</div>
		<!-- 添加表单结束 -->
		<!-- 编辑表单开始 -->
		<div style="display: none;" id="update">
			<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
				<div class="layui-col-sm4">
						<div class="layui-form-item">
							<label class="layui-form-label">id</label>
							<div class="layui-input-block">
								<input type="text" name="id" lay-verify="required" readonly="true" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-sm4">
						<div class="layui-form-item">
							<label class="layui-form-label">选择身份</label>
							<div class="layui-input-block">
								<select name="role" lay-filter="aihao">
									<option value=""></option>
									<option value="admin" selected>管理员</option>
									<option value="user">用户</option>
									<option value="visitor">游客</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-col-sm4">
						<div class="layui-form-item">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">密码</label>
							<div class="layui-input-block">
								<input type="text" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-col-sm6">
						<div class="layui-form-item">
							<label class="layui-form-label">手机号</label>
							<div class="layui-input-block">
								<input type="text" name="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit lay-filter="demo2">修改</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
		</div>
		<!-- 添加或编辑结束 -->
		<script src="seq.js"></script>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
    			<button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
				<span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
				<i class="layui-icon layui-icon-down layui-font-12"></i>
				</button>
			</div>
		</script>
		<script type="text/html" id="toolDemo">
			<div class="layui-clear-space">
				<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
				<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
				
			</div>
		</script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['table', 'dropdown'], function() {
				var $ = layui.$;
				var table = layui.table;
				var dropdown = layui.dropdown;
				var $ = layui.$;
				var layer = layui.layer;
				var util = layui.util;
				var form = layui.form;
				
				// 创建渲染实例
				table.render({
					elem: '#test',
					url: baseUrl+'users/userlist', // 此处为静态模拟数据，实际使用时需换成真实接口
					
					toolbar: '#toolbarDemo',
					defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips',
						onClick: function(obj) { // 2.9.12+
							layer.alert('自定义工具栏图标按钮');
						}
					}],
					height: 'full-35', // 最大高度减去其他容器已占有的高度差
					css: [ // 重设当前表格样式
						'.layui-table-tool-temp{padding-right: 145px;}'
					].join(''),
					cellMinWidth: 80,
					page: true,

					headers: {
						'Access-Control-Allow-Origin': '*'
					},
					request: {
						pageName: 'pageNum', // 页码的参数名称，默认：page
						limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
					},
					// response: {
					// 	statusname: 'code', // 数据状态的字段名称，默认：code
					// 	statusCode: 200, // 数据返回的接口状态码，默认：0

					//   },
					// 将原始数据解析成 table 组件所规定的数据格式
					parseData: function(res) {
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.result.total, //解析数据长度
							"data": res.result.rows //解析数据列表
						};
					},
					// contentType: "application/json",
					cols: [
						[{
								type: 'checkbox',
								fixed: 'left'
							},
							{
								field: 'id',
								fixed: 'left',
								title: 'ID',
								sort: true,
								totalRow: '合计：'
							},
							{
								field: 'userName',
								title: '用户名'
							},
							{
								field: 'phone',
								
								title: '电话'
							},
							{
								field: 'password',
								
								title: '密码',
								sort: true
							},
							{
								field: 'role',
								
								title: '类别身份',
								sort: true
							},
							{
								fixed: 'right',
								title: '操作',
								width: 160,
								minWidth: 150,
								templet: '#toolDemo'
							}
						]
					],
					done: function() {
						var id = this.id;
					
						// 行模式
						dropdown.render({
							elem: '#rowMode',
							data: [{
								id: 'default-row',
								title: '单行模式（默认）'
							}, {
								id: 'multi-row',
								title: '多行模式'
							}],
							// 菜单被点击的事件
							click: function(obj) {
								var checkStatus = table.checkStatus(id)
								var data = checkStatus.data; // 获取选中的数据
								switch (obj.id) {
									case 'default-row':
										table.reload('test', {
											lineStyle: null // 恢复单行
										});
										layer.msg('已设为单行');
										break;
									case 'multi-row':
										table.reload('test', {
											// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
											lineStyle: 'height: 95px;'
										});
										layer.msg('即通过设置 lineStyle 参数可开启多行');
										break;
								}
							}
						});
					},
					error: function(res, msg) {
						console.log(res, msg)
					}
				});

				// 工具栏事件
				table.on('toolbar(test)', function(obj){
					
				  var id = obj.config.id;
				  var checkStatus = table.checkStatus(id);
				  var othis = lay(this);
				  switch(obj.event){
				    case 'getCheckData':
				      var data = checkStatus.data;
				      layer.alert(layui.util.escape(JSON.stringify(data)));
				      break;
				    case 'getData':
				      var getData = table.getData(id);
				      console.log(getData);
				      layer.alert(layui.util.escape(JSON.stringify(getData)));
				      break;
					 case 'addData' :
					 layer.open({
					 	title: '添加 ',
					 	type: 1,
					 	area: ['60%', '60%'],
					 	content: $("#save"),
						success: function(index) {
							// 表单数据置空
							$("#dataFrm")[0].reset()
						}
					 });
					 break;
				  };
				});
				// // 表头自定义元素工具事件 --- 2.8.8+
				// table.on('colTool(test)', function(obj){
				//   var event = obj.event;
				//   console.log(obj);
				//   if(event === 'email-tips'){
				//     layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
				//       title: '当前列属性配置项'
				//     });
				//   }
				// });

				// 触发单元格工具事件
				table.on('tool(test)', function(obj) { // 双击 toolDouble
					var data = obj.data; // 获得当前行数据
					if (obj.event === 'edit') {
						var index=layer.open({
									title: '编辑'+data.id,
									type: 1,
									area: ['80%', '80%'],
									content: $("#update"),
									success: function(index) {
										// 调取本行数据
							    	form.val("dataFrm", data);
								
									}
								});
							
						
					} else if (obj.event === 'del') {
						layer.confirm('真的删除行 [id: ' + data.id + '] 么', function(index) {
							obj.del(); // 删除对应行（tr）的DOM结构
							layer.close(index);
							// 向服务端发送删除指令
							$.ajax({
								url: baseUrl+'users/'+data.id,
								type: 'DELETE',
								contentType: 'application/json',
								success: function(res) {
									if (res.code === 200) {
										// 删除数据成功
									let msg = res.message;
									layer.alert(msg, {
										title: '数据删除'
									});
									window.location.reload()}
									else{
										let msg = res.message;
										layer.alert(msg, {
											title: '数据删除'
										});
									}
									// 如果删除数据失败
									
								},
								error: function(err) {
									
									console.log('error', err)
								}
							});
						});
					} ;
				});
				// 单元格编辑事件
				table.on('edit(test)', function(obj) {
					var field = obj.field; // 得到字段
					var value = obj.value; // 得到修改后的值
					var data = obj.data; // 得到所在行所有键值
					// 值的校验
					if (field === 'email') {
						if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)) {
							layer.tips('输入的邮箱格式不正确，请重新编辑', this, {
								tips: 1
							});
							return obj.reedit(); // 重新编辑 -- v2.8.0 新增
						}
					}
					// 编辑后续操作，如提交更新请求，以完成真实的数据更新
					// …
					layer.msg('编辑成功', {
						icon: 1
					});

					// 其他更新操作
					var update = {};
					update[field] = value;
					obj.update(update);
				});
			});
		</script>
		<script>
			layui.use(['form', 'util'], function() {
				var form = layui.form;
				var layer = layui.layer;
				var util = layui.util;
			    var element = layui.element;
				var $ = layui.$;
				
		       
		
				// 提交事件
				form.on('submit(demo1)', function(data) {
					var formData = data.field; // 获取表单字段值
					// 显示填写结果，仅作演示用
					layer.alert(JSON.stringify(formData), {
						title: '当前填写的字段值'
					});
					// 此处可执行 Ajax 等操作
					$.ajax({
						url: baseUrl+'users/register',
						type: 'POST',
						contentType: 'application/json',
						data: JSON.stringify(formData),
						success: function(res) {
							// console.log('success', res)
							if (res.code === 200) {
								// 注册成功
							let msg = res.message;
							layer.alert(msg, {
								title: '用户注册'
							});}
							else{
								let msg = res.message;
								layer.alert(msg, {
									title: '用户注册'
								});
							}
						},
						error: function(err) {
							console.log('error', err)
						}
					});
					return false; // 阻止默认 form 跳转
				});
				
				// 修改事件
				form.on('submit(demo2)', function(data) {
					var formData = data.field; // 获取表单字段值
					// 显示填写结果，仅作演示用
					// layer.alert(JSON.stringify(formData), {
					// 	title: '当前填写的字段值'
					// });
					// 此处可执行 Ajax 等操作
					$.ajax({
						url: baseUrl+'users/'+formData.id,
						type: 'PUT',
						contentType: 'application/json',
						data: JSON.stringify(formData),
						success: function(res) {
							// console.log('success', res)
							if (res.code === 200) {
								// 修改成功								
							let msg = res.message;
							layer.alert(msg, {
								title: '修改'
							} );
							
							    // 获得frame索引
							    var index = parent.layer.getFrameIndex(window.name);
							    //关闭当前frame
							    parent.layer.close(index);
							    //修改成功后刷新父界面
							    window.parent.location.reload();
							}else{
								let msg = res.message;
								layer.alert(msg, {
									title: '修改'
								});
							}
						},
						error: function(err) {
							console.log('error', err)
						}
					});
					return false; // 阻止默认 form 跳转
				});
				
			});
		</script>
		
	</body>
</html>
